<template>
  <div class="resume-container">
    <div class="resume-container-content">
      <div class="user-info">
        <div class="avatar-profession">
          <el-avatar class="avatar" shape="square" :src="avatar" :size="150"></el-avatar>
          <h3 class="user-name" v-text="user.name"></h3>
        </div>
        <div class="profession">
          <img src="http://img.shields.io/badge/Java-开发工程师-orange.svg?style=flat-square"/>
          <img src="http://img.shields.io/badge/Web-开发工程师-orange.svg?style=flat-square&color=FF9900"/>
        </div>
        <el-divider>关于我</el-divider>
        <div class="about-me">
          <div class="about-me-text">
            <svg-icon icon-class="email" class-name="icon-class"/>
            <span class="text" v-text="user.email"></span>
          </div>
          <div class="about-me-text">
            <svg-icon icon-class="phone" class-name="icon-class"/>
            <span class="text" v-text="user.phone"></span>
          </div>
          <div class="about-me-text">
            <svg-icon icon-class="address" class-name="icon-class"/>
            <span class="text" v-text="user.address"></span>
          </div>
          <div class="about-me-text">
            <svg-icon icon-class="work1" class-name="icon-class"/>
            <span class="text" v-text="user.work"></span>
          </div>
          <div class="about-me-text">
            <svg-icon icon-class="wechat" class-name="icon-class"/>
            <span class="text" v-text="user.wechat"></span>
          </div>
          <div class="about-me-text">
            <svg-icon icon-class="user" class-name="icon-class"/>
            <span class="text" v-text="user.onboarding"></span>
          </div>
          <div class="about-me-text">
            <svg-icon icon-class="money" class-name="icon-class"/>
            <span class="text" v-text="user.money"></span>
          </div>
        </div>
        <el-divider>职业技能</el-divider>
        <div class="skill">
          <div v-for="(item,index) in skill" :key="index">
            <span class="skill-text" v-text="item.name"></span>
            <el-progress :percentage="item.percentage" :format="format" :color="customColorMethod"></el-progress>
          </div>
        </div>
        <el-divider>自我评价</el-divider>
        <div class="self-evaluation">
          <div v-for="(item,index) in selfEvaluation" :key="index">{{index+1}}.{{item}}<br/></div>
        </div>
      </div>
      <el-collapse-transition>
        <router-view class="info-detail"/>
      </el-collapse-transition>
    </div>
    <div class="nav-bar">
      <el-tooltip class="nav-bar-item" v-for="item in pages" :key="item.index" effect="dark" :content="item.desc" placement="left">
        <svg-icon :icon-class="item.svg" class-name="svg-class" @click="to(item.path)"/>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, ref} from 'vue';
import { useRouter } from "vue-router";
import image from '@/assets/images/avatar.gif'
import SvgIcon from "../components/SvgIcon/SvgIcon";
import Data from '@/data/data.json'
export default defineComponent({
  name: 'Home',
  components: {
    SvgIcon,
    // InfoDetail
  },
  setup() {
    const { push } = useRouter();
    const loading = ref(true)
    const avatar = image
    const user = Data.user
    const skill = Data.skill
    const selfEvaluation = Data.selfEvaluation
    function format(percentage){
      if(percentage >90 && percentage <=100){
        return '精通'
      }
      if(percentage >60 && percentage <=90){
        return '熟练'
      }
      if(percentage >30 && percentage <=60){
        return '掌握'
      }
      if(percentage >=0 && percentage <=30){
        return '熟悉'
      }
    }
    function customColorMethod(percentage){
      if(percentage >90 && percentage <=100){
        return '#67C23A'
      }
      if(percentage >60 && percentage <=90){
        return '#409EFF'
      }
      if(percentage >30 && percentage <=60){
        return '#E6A23C'
      }
      if(percentage >=0 && percentage <=30){
        return '#F56C6C'
      }
    }

    setTimeout(() => {
      loading.value = false
    }, 1500)
    const pages = reactive([
      {path: '/work', index: 0,svg:'work1',desc:'工作经历'},
      {path: '/project', index: 1,svg:'project',desc:'项目介绍'},
      // {path: '/skill', index: 2,svg:'skill',desc:'技能栈'},
      // {path: '/education', index: 3,svg:'education',desc:'教育经历'}
    ])

    function to(path){
      push({path:path})
    }
    return {
      loading,
      user,
      avatar,
      skill,
      selfEvaluation,
      format,
      customColorMethod,
      pages,
      to
    }
  },

})
</script>
<style scoped lang="scss">
.resume-container {
  width: 100%;
  height: 100%;
  .resume-container-content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch; .user-info {
    background-color: #303133;
    width: 300px;
    .avatar-profession {
      text-align: center;
      .avatar {
        margin-top: 80px;
      }

      .user-name {
        background: linear-gradient(to right, white, white);
        -webkit-background-clip: text;
        color: transparent;
        animation: blink 2s linear infinite;
        -webkit-animation: blink 2s linear infinite;
        -moz-animation: blink 2s linear infinite;
        -ms-animation: blink 2s linear infinite;
        -o-animation: blink 2s linear infinite;
      }

      @keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 0.8;
        }
      }
      @-webkit-keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 0.8;
        }
      }
      @-moz-keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 0.8;
        }
      }
      @-ms-keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 0.8;
        }
      }
      @-o-keyframes blink {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 0.8;
        }
      }

    }

    .profession {
      display: flex;
      justify-content: space-around;
    }

    .about-me {
      padding: 0 30px 0 30px;

      .about-me-text {
        display: flex;
        align-items: center;
        margin: 5px 0 5px 0;

        .icon-class {
          color: #fff;
        }

        .text {
          color: #fff;
          font-size: 14px;
          font-weight: bold;
          margin-left: 30px;
        }
      }
    }
    .skill{
      padding: 0 30px 0 30px;
      .skill-text{
        color: #fff;
        font-size: 12px;
        font-weight: bold;
      }
    }

    .self-evaluation{
      padding: 0 30px 0 30px;
      color:#fff;
      font-size: 14px;
      font-weight: bold;
    }
  }
    .info-detail {
      flex: 1;
    }
  }
  .nav-bar {
    position: fixed;
    top: 100px;
    right: 30px;
    z-index: 99;
    display: flex;
    flex-direction: column;

    .svg-class{
      font-size: 20px;
      cursor: pointer;
      transition: all 0.6s;
      color: white;
      &:hover{
        transform: scale(1.4);
      }
    }

    .nav-bar-item{
      margin: 10px 0 10px 0;
    }
  }
}
</style>